// 引入项目配置
import {config} from "@/config/index.js";
import {setMutation} from "@/util/store.js";

/**
 * @description 设置网页标题
 * @param {string} title 网页标题
 */
export function setTitle(title) {
    if (!title) {
        return
    }
    let titleElement = document.head.querySelector('title')
    if (!titleElement) {
        titleElement = document.createElement('title')
    }
    titleElement.textContent = title ?? config.title

    let hasTitle = Array.from(document.head.children).some((item) => item.tagName === 'title')

    if (!hasTitle) {
        document.head.insertAdjacentElement('beforeend', titleElement)
    }
}

/**
 * @description 设置网页图标
 * @param {string} faviconPath 网页图标路径，不包括 public 目录
 * @example setFavicon('icon/favicon.ico')
 */
export function setFavicon(faviconPath) {
    if (!faviconPath) {
        return
    }
    let resultPath = config.resourceBaseUrl + faviconPath

    let link = document.head.querySelector('link[rel=icon]')
    if (!link) {
        link = document.createElement('link')
        link.rel = 'icon'
    }
    link.href = resultPath
    let hasLink = Array.from(document.head.children).some((item) => {
        let isLink = item.tagName === 'link'
        let isIcon = item.rel = 'icon'
        return isLink && isIcon
    })
    if (!hasLink) {
        document.head.insertAdjacentElement('beforeend', link)
    }
}

/**
 * @description 设置 html 元素的 fontSize，相当于设置全局的 rem 值
 * @param innerWidth {number} 当前视口宽度
 */
function setRem(innerWidth) {
    document.documentElement.style.fontSize = (innerWidth / config.designWidth) + 'px'
}

/**
 * @description 当视口大小改变时，会通知 watchers 数组中的全部对象，调用其 notify 方法，并自动传入当前视口宽度，
 * 这里默认有一个, 设置 html 元素 fontSize 的 watcher
 */
export let watchersManager = {
    /**
     * @description 当视口大小改变时，会通知 watchers 数组中的全部对象，调用其 notify 方法，并自动传入当前视口宽度，
     * 这里默认有一个, 设置 html 元素 fontSize 的 watcher
     */
    watchers: [{
        notify(innerWidth) {
            setRem(innerWidth)
        }
    }],
    /**
     * @description 添加视口改变时，需要通知的 watcher 对象
     * @param watcher
     */
    add(watcher) {
        this.watchers.push(watcher)
    }
}

/**
 * @description 在 window 上监听视口改变事件，并通知所有对该事件感兴趣的 watcher
 */
export function setSizeChangeListener() {
    let innerWidth = window.innerWidth
    setRem(innerWidth)

    window.addEventListener('resize', () => {
        let innerWidth = window.innerWidth
        if (innerWidth < 1000) {
            innerWidth = 1000
        }
        for (let watcher of watchersManager.watchers) {
            watcher.notify(innerWidth)
        }
    })
}

export function setFullScreenListener() {
    document.body.addEventListener('fullscreenchange', (event) => {
        let isFullScreen = document.fullscreenElement
        if (isFullScreen) {
            setMutation('top', 'setIsFullScreen', true)
        } else {
            setMutation('top', 'setIsFullScreen', false)
        }
    })
}